<template>
    <div class="content">
        <div class="card-list">
            <div class="card-item" v-for="item in cardList" :key="item.id">
                <card-item :item="item" type="settle" :studyhallId="item.studyhallId" />
            </div>
        </div>
        <div
            class="empty"
            v-if="cardList.length === 0 && isFinish && cardHistory.length === 0 && finishHistory"
        >
            <img class="image" src="@/static/images/common/empty.png" />
            <p class="name">暂无记录</p>
        </div>
        <u-loadmore
            loadmoreText="以下为过期或已使用卡券"
            fontSize="24rpx"
            color="#898989"
            lineColor="#D4D4D4"
            marginTop="20"
            line
            v-if="cardHistory.length > 0"
        />
        <div class="card-list" v-if="cardHistory.length > 0">
            <div class="card-item" v-for="item in cardHistory" :key="item.id">
                <card-item :item="item" disabled />
            </div>
        </div>
    </div>
</template>

<script>
import CardItem from '@/components/CardItem';
export default {
    name: 'my',
    components: {
        CardItem,
    },
    data() {
        return {
            cardList: [],
            isFinish: false,
            cardHistory: [],
            finishHistory: false,
        };
    },
    onLoad() {
        this.getCardList();
        this.getCardListHistory();
    },
    methods: {
        getCardList() {
            this.$Api.member.card
                .list({
                    queryType: 1,
                })
                .then(res => {
                    this.cardList = res;
                    this.isFinish = true;
                });
        },
        getCardListHistory() {
            this.$Api.member.card
                .list({
                    queryType: 2,
                })
                .then(res => {
                    this.cardHistory = res;
                    this.finishHistory = true;
                });
        },
    },
};
</script>

<style lang="scss" scoped>
.content {
    .card-list {
        padding: 20rpx 30rpx;
        .card-item {
            margin-bottom: 20rpx;
        }
    }
}
</style>
